<template>
  <div style="padding: 10px">
    <br/>
    <div class="text">用户{{ruleForm.username}}的订单{{ruleForm.orderId}}中的商品列表</div>
    <br/>
  <div>
    <el-table
      :data="tableData.slice((curPage-1)*pagesize,curPage*pagesize)"
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.productName }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.productId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.typeName }}</span>
            </el-form-item>
            <el-form-item label="商品定价">
              <span>{{ props.row.productPrice }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.introduction }}</span>
            </el-form-item>
            <el-form-item label="商品规格参数">
              <span>{{ props.row.specifications }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品图片">
        <template slot-scope="scope">
          　　　　<img :src="scope.row.image" width="40" height="40" class="head_pic"/>
          　　</template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="productId">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="productName">
      </el-table-column>
      <el-table-column
        label="商品数量"
        prop="productNum">
      </el-table-column>
      <el-table-column
        label="价格"
        prop="price">
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="curPage"
      :page-size="pagesize"
      :pager-count="pagerCount"
      :total="tableData.length"
      background
      layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          username:this.$route.query.username,
          orderId:this.$route.query.orderId
        },
        pagerCount:5,
        pagesize: 2,
        curPage: 1,
        tableData: []
      }
    },
    mounted() {

      this.init();

    },
    methods:{
      init:function() {
        let search={
          orderId:this.$route.query.orderId
        }
        console.log(search)
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          method: "post",
          url:"http://localhost:8080/api/order/orderproducts",
          data:{
            orderId:search.orderId
          }
        }).then((res)=>{
          console.log(res.data);
          if(res.data.resultCode==="0"){
            this.tableData= res.data.orderProductsList;

          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
